<template>
	<div><div>    
		#传递对象给 v-bind:class
    <div v-bind:class="{ active: isActive }"></div>
    #效果为：<div class="active"></div>

    #传递数组传给 v-bind:class
    <div v-bind:class="[activeClass, errorClass]"></div>
    #效果为：<div class="active text-danger"></div>

    #传递多属性对象给 v-bind:class
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': error }"> </div>
    #效果为：<div class="static active text-danger"></div>

    # errorClass 始终存在，isActive 为 true 时添加 activeClass ： 
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

    #可以在 v-bind:style 直接设置样式：
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}">测试</div>
    #效果为：<div style="color: green; font-size: 30px;">测试</div>

    #也可以在 v-bind:style 绑定一个对象或数组：
    <div v-bind:style="styleObject">测试</div>
    <div v-bind:style="[styleObject, overridingStyles]">测试</div>
   
	</div></div>
</template>
<script>
export default {
  data () { 
    return {
      error: 1,
    	isActive: true,      
      activeClass: 'active', 
      errorClass: 'text-danger',
      activeColor: 'green',
      fontSize: 30,
      styleObject: { 
         color: 'green', 
         fontSize: '30px'
      },
      overridingStyles: {
        'font-weight': 'bold'
      }
    } 
  },
  computed: {
    classObject: function () {
      return { 
        active: this.isActive && !this.error, 
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  width: 100px;
  height: 100px;
  background: green;
}
.text-danger {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
